<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
  String path = request.getContextPath();
%>
<head>
  <script src="../assets/js/echarts.min.js"></script>
  <script src="../assets/js/jquery.min.js"></script>
  <script src="../assets/js/theme.js"></script>
  <script src="../assets/js/amazeui.min.js"></script>
  <script src="../assets/js/amazeui.datatables.min.js"></script>
  <script src="../assets/js/dataTables.responsive.min.js"></script>
  <%--    <script src="../assets/js/app.js"></script>--%>
</head>

<div class="container-fluid am-cf">
  <div class="row">
    <div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
      <div class="page-header-heading"><span class="am-icon-home page-header-heading-icon"></span> 图书归还
        <small>常用功能</small></div>
      <p class="page-header-description"></p>
    </div>
  </div>
</div>

<div class="row-content am-cf">

  <div class="row">

    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
      <div class="widget am-cf">
        <div class="widget-head am-cf">
          <div class="widget-title am-fl">会员图书信息查询</div>
        </div>
        <div class="widget-body am-fr">

          <form class="am-form tpl-form-border-form" id="fm_addMem">

            <div class="am-form-group">
              <label for="name" class="am-u-sm-12 am-form-label am-text-left">用户名 <span
                      class="tpl-form-line-small-title">member-name</span></label>
              <div class="am-u-sm-12">
                <input type="text" class="tpl-form-input am-margin-top-xs" id="name" name="name"
                       placeholder="请输入用户名">
              </div>
            </div>

            <div class="am-form-group">
              <div class="am-u-sm-12 am-u-sm-push-12">
                <button type="button" class="am-btn am-btn-primary tpl-btn-bg-color-success "
                        id="bt_addmem">查询
                </button>
              </div>
            </div>

          </form>



        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
      <div class="widget am-cf">
        <div class="widget-head am-cf">
          <div class="widget-title  am-cf">借阅历史列表</div>


        </div>
        <div class="widget-body  am-fr">



          <div class="am-u-sm-12">
            <table width="100%" class="am-table am-table-compact am-table-striped tpl-table-black "
                   id="example-r">
              <thead>
              <tr>
                <th>图书名</th>
                <th>借书时间</th>
                <th>应还时间</th>
                <%--                                <th>时间</th>--%>
                <%--                                <th>时间</th>--%>
                <%--                                <th>时间</th>--%>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <tr class="gradeX">
                <td>Amaze UI 模式窗口</td>
                <td>张鹏飞</td>
                <td>2016-09-26</td>
                <td>
                  <div class="tpl-table-black-operation">
                    <a href="javascript:;">
                      <i class="am-icon-pencil"></i> 归还
                    </a>
                    <a href="javascript:;" class="tpl-table-black-operation-del">
                      <i class="am-icon-bell"></i> 续借
                    </a>
                  </div>
                </td>
              </tr>
              <tr class="even gradeC">
                <td>有适配微信小程序的计划吗</td>
                <td>天纵之人</td>
                <td>2016-09-26</td>
                <td>
                  <div class="tpl-table-black-operation">
                    <a href="javascript:;">
                      <i class="am-icon-pencil"></i> 归还
                    </a>
                    <a href="javascript:;" class="tpl-table-black-operation-del">
                      <i class="am-icon-bell"></i> 续借
                    </a>
                  </div>
                </td>
              </tr>
              <tr class="gradeX">
                <td>请问有没有amazeui 分享插件</td>
                <td>王宽师</td>
                <td>2016-09-26</td>
                <td>
                  <div class="tpl-table-black-operation">
                    <a href="javascript:;">
                      <i class="am-icon-pencil"></i> 归还
                    </a>
                    <a href="javascript:;" class="tpl-table-black-operation-del">
                      <i class="am-icon-bell"></i> 续借
                    </a>
                  </div>
                </td>
              </tr>
              <tr class="even gradeC">
                <td>关于input输入框的问题</td>
                <td>着迷</td>
                <td>2016-09-26</td>
                <td>
                  <div class="tpl-table-black-operation">
                    <a href="javascript:;">
                      <i class="am-icon-pencil"></i> 归还
                    </a>
                    <a href="javascript:;" class="tpl-table-black-operation-del">
                      <i class="am-icon-bell"></i> 续借
                    </a>
                  </div>
                </td>
              </tr>
              <tr class="even gradeC">
                <td>有没有发现官网上的下载包不好用</td>
                <td>醉里挑灯看键</td>
                <td>2016-09-26</td>
                <td>
                  <div class="tpl-table-black-operation">
                    <a href="javascript:;">
                      <i class="am-icon-pencil"></i> 归还
                    </a>
                    <a href="javascript:;" class="tpl-table-black-operation-del">
                      <i class="am-icon-bell"></i> 续借
                    </a>
                  </div>
                </td>
              </tr>

              <tr class="even gradeC">
                <td>我建议WEB版本文件引入问题</td>
                <td>罢了</td>
                <td>2016-09-26</td>
                <td>
                  <div class="tpl-table-black-operation">
                    <a href="javascript:;">
                      <i class="am-icon-pencil"></i> 归还
                    </a>
                    <a href="javascript:;" class="tpl-table-black-operation-del">
                      <i class="am-icon-bell"></i> 续借
                    </a>
                  </div>
                </td>
              </tr>
              <!-- more data -->
              </tbody>
            </table>
          </div>
          <div class="am-u-lg-12 am-cf">

            <div class="am-fr">
              <ul class="am-pagination tpl-pagination">
                <li class="am-disabled"><a href="#">«</a></li>
                <li class="am-active"><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">»</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="../assets/js/jquery-3.3.1.min.js"></script>
<script>
  $("#bt_addmem").click(function () {
    var inputData = $("#fm_addMem").serialize();
    alert(inputData);
  });
</script>

